<template>
  <div class="app">
    <div class="rank-list">
      <div class="rank">
        <div class="rank-right rklr">
          <div class="g-wrap">
            <div class="artistname">
              <h2>薛之谦</h2>
              <span></span>
            </div>
            <div class="cnt artister">
              <!-- <img :src="singerList[0].picUrl" alt /> -->
              <img src="../../../../assets/dlximgs/xzq.jpg" alt />
              <div class="tmc">
                <!-- <img src="../../../../assets/dlximgs/bjc.png" alt /> -->
              </div>

              <!-- 个人主页和图标 -->
              <!-- <img src="../../../../assets/dlximgs/iconall.png" alt /> -->
              <a href>
                <div class="own-icont btn-rz"></div>
              </a>

              <a href>
                <div class="sc-icont"></div>
              </a>
            </div>
            <!-- tab切花 -->
            <ul id="m_tabs" class="m-tabs f-cb">
              <li
                id="poerli"
                v-for="(item,index) in poerList"
                :key="index"
                @mouseenter="musenter(item.id)"
                @mouseleave="leave(item.id)"
                @click="proClick(item.id)"
              >
                <a>
                  <em>{{item.msg}}</em>
                </a>
              </li>
              <div class="floatLi"></div>
            </ul>
          </div>

          <div class="g-wrap12">
            <div class="wrapcenter">
              <!--  -->
              <ul class="tabul">
                <li class="sc">
                  <a href>
                    <img src="../../../../assets/dlximgs/py.png" alt />
                  </a>
                  <a class="addpy" href>
                    <img src="../../../../assets/dlximgs/addpy.png" alt />
                  </a>
                </li>

                <li class="addsc">
                  <a href>
                    <img src="../../../../assets/dlximgs/addsc.png" alt />
                  </a>
                </li>
                <li class="danqu">
                  <a href>
                    <img src="../../../../assets/dlximgs/danqu.png" alt />
                  </a>
                </li>
              </ul>

              <!-- 歌曲累表 -->
              <div class="ulclas">
                <ul class="ulli">
                  <li id="lient" v-for="(item,index) in artists" :key="index">
                    <ul class="ulis">
                      <li>{{index+1}}</li>
                      <li @mouseenter="enterflag(index)" @mouseleave="leaveflag(index)">
                        <img v-if="flag" src="../../../../assets/dlximgs/play.png" alt />
                        <img v-else src="../../../../assets/dlximgs/play1.png" alt />
                      </li>
                      <li>
                        <a href>{{item.name}}</a>
                        <a href class="imgs">
                          <img src="../../../../assets/dlximgs/ppl.png" alt />
                        </a>
                      </li>
                      <li>03:02</li>
                      <li>{{item.name}}</li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="rank-left rklr">
          <div class="rankcenter">
            <div class="h3u">
              <h3 class="u-hd3">
                <span class="f-fl">热门歌手</span>
              </h3>
            </div>
            <div class="lising">
              <ul>
                <li v-for="(item,index) in singerList1" :key="index">
                  <img :src="item.img1v1Url" alt="">
                  <p>{{item.name}}</p>
                </li>
              </ul>
            </div>

            <!-- 组建引入 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    singerList: [],
    artists: [],
    flag: true,
    poerList: [
      {
        id: 0,
        msg: "热门作品",
      },
      {
        id: 1,
        msg: "所有专辑",
      },
      {
        id: 2,
        msg: "相关MV"
      },
      {
        id: 3,
        msg: "艺人介绍",
      },
    ],
    poerLists: [],
    poerIdClick: 0,
   singerList1:[],
  }),
  created() {
    this.getSingerList();
   
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.poerLists = Array.from(document.querySelectorAll("#poerli"));
      this.poerLists[0].className = "poer";
    },
   
    enterflag(index) {
      // document.getElementById("lient").style.height="23px"
      // .style.height="23px"
    },
    leaveflag(index) {},
    async getSingerList() {
      const {
        data: { artists },
      } = await this.Api.dlxApi.getSingerList();
      this.singerList = artists.slice(0, 10);
      this.artists = artists;
      this.singerList1 = artists.slice(14,23)
      console.log(this.singerList1)
    },
    musenter(id) {
      this.poerLists[id].className = "poer";
    },
    leave(id) {
      this.poerLists[id].className = "";
      this.poerLists[this.poerIdClick].className = "poer";
    },
    proClick(id) {
      for (var i = 0; i < this.poerLists.length; i++) {
        this.poerLists[i].className = "";
      }
      this.poerLists[id].className = "poer";
      this.poerIdClick = id;
    },
  },
};
</script>
<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
.rank {
  width: 990px;
  margin: 0 auto;
  /* height: 3000px;   */
  position: relative;
  /* background: antiquewhite; */
}
.rank-list {
  width: 100%;

  height: 100%;
}
.rank-left {
  width: 246px;
  float: right;
  border: 1px solid #b3b0b0;
  border-top: none;
  height: 1118px;
  border-bottom: none;
  /* background: azure; */
}
.rklr {
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.rank-right {
  float: left;
  /* background: bisque; */
}
.g-wrap {
  width: 662px;
  height: 311px;
  position: relative;
}
.cnt {
  width: 640px;
  height: 300px;
  position: absolute;
  left: 53px;
  top: 54px;
  /* background: aliceblue; */
}
.wrapcenter[data-v-d3c2a96c] {
  width: 660px;
  margin: 0 auto;
  overflow: hidden;
}
.artistname h2 {
  float: left;
  max-width: 75%;
  height: 34px;
  line-height: 24px;
  font-weight: normal;
  font-size: 24px;
  color: #333;
}
.artistname {
  position: relative;
  top: 27px;
  left: 56px;
}
.artister {
  overflow: hidden;
}
.artister img {
  width: 640px;
  /* height: 300px; */
}
.tmc {
  background-image: url("../../../../assets/dlximgs/bjc.png");
  background: linear-gradient(
    to bottom,
    rgba(230, 230, 230, 0),
    rgba(6, 6, 6, 0.35)
  );
  width: 640px;
  height: 65px;
  position: absolute;
  bottom: 0px;
}
.sc-icont {
  background-image: url("../../../../assets/dlximgs/iconall.png");
  display: block;
  position: absolute;
  bottom: 18px;
  right: 20px;
  width: 76px;
  height: 32px;
  background-position: 0 -500px;
}
.btn-rz {
  background-image: url("../../../../assets/dlximgs/iconall.png");
  display: block;
  position: absolute;
  bottom: 18px;
  right: 116px;
  width: 96px;
  height: 32px;
  background-position: 0 -1156px;
}

.btn-rz:hover {
  background-position: 0 -1196px;
}
.sc-icont:hover {
  background-position: 0 -540px;
}

/* tab切换 */
.m-tabs {
  width: 640px;
  position: absolute;
  /* left: 0; */
  left: 53px;
  /* border-bottom: 1px solid rgb(202, 202, 202); */
  bottom: -85px;
  background: rgb(241, 241, 241);
}
.m-tabs li {
  float: left;
  height: 39px;
  font-size: 14px;
}
.m-tabs em {
  height: 36px;
  /* width: 132px; */
  padding: 2px 2px 0 0;
  line-height: 37px;
  cursor: pointer;
  text-align: center;
  display: block;
}
.m-tabs li {
  border-bottom: 1px solid rgb(202, 202, 202);
  width: 132px;
  border-top: 2px solid;
}
.m-tabs li:nth-child(5) {
  width: 110px;
  overflow: hidden;
  border-right: 1px solid rgb(202, 202, 202);
}
.m-tabs li.poer em:nth-child(5) {
  width: 100px;
}
.m-tabs li:nth-child(1) {
  border-left: 1px solid rgb(202, 202, 202);
  /* border-bottom: 1px solid rgb(241, 241, 241);
   */
}
.m-tabs .poer {
  border-top: 2px rgb(230, 66, 48) solid;
  height: 40px;
  border-bottom: none;
}
.floatLi {
  height: 40px;
  width: 111px;
  border: 1px solid rgb(202, 202, 202);
  border-left: none;
  position: absolute;
  right: 0px;
  /* background: aqua; */
}
.g-wrap12 {
  width: 742px;
  /* background: aquamarine; */
  height: 706px;
  overflow: hidden;
  margin-top: 102px;
}
.wrapcenter {
  width: 642px;
  /* background: beige; */
  margin: 0 auto;
  height: 1000px;
}
.tabul {
  list-style: none;
  width: 642px;
  height: 32px;
}
.tabul li {
  float: left;
  height: 32px;
  width: 100px;
  position: relative;
}
.tabul li:nth-child(3) {
  float: right;
}
.sc a {
  position: relative;
  display: inline-block;
}
.sc a.addpy {
  top: -1px;
}
.tabul li a:hover {
  opacity: 0.7;
}
.ulclas {
  width: 100%;
  /* background: burlywood; */
  height: 800px;
}
.ulli {
  list-style: none;
}
.ulli li {
  float: left;
  width: 100%;
}
.ulis li {
  float: left;
  width: 25%;
  height: 22px;
}
.ulis li:nth-child(1) {
  width: 61px;
  text-align: center;
}
.ulis li:nth-child(2) {
  width: 61px;
  text-align: center;
}
.ulis li:nth-child(3) {
  position: relative;
}
.ulis li:nth-child(4) {
  text-align: right;
}
.ulis li:nth-child(5) {
  text-align: center;
  margin-left: 30px;
}
.imgs {
  display: inline-block;
  position: relative;
  top: 6px;
}
.rankcenter {
  width: 206px;
  height: 1000px;
  /* background: aqua; */
  margin: 0 auto;
  overflow: hidden;
}
.u-hd3 {
  position: relative;
  *zoom: 1;
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  top: 13px;
}
.h3u {
  width: 206px;
  position: absolute;
}
.lising{
  width: 206px;
  position: relative;
      top: 52px;
    left: 12px;
        text-align: center;
            height: 232px;
  
}
.lising ul li{
  float: left;
  width: 30%;
}
.lising ul li img{
  width: 50px;
  height: 50px;
}
</style>